<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>模板语法</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
		<style type="text/css">
			.cls {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 数据绑定最常用的方式 -- 文本插值 -->
			<p>{{message}}</p>

			<!-- 表达式计算 -->
			<p>{{25 + 25}}</p>
			<p>{{use ? "使用": "不使用"}}</p>
			<!-- JS的功能函数都可以正常使用 -->
			<p>{{username.toLowerCase()}}</p>

			<!-- v-html指令,HTML插值 -->
			<p v-html="message"></p>

			<input type="checkbox" v-model="use" />

			<!-- v-bind指令,绑定html属性中的值 -->
			<!-- v-model指令用于在input、select、text、checkbox、radio等表单空间元素上创建双向数据绑定 -->
			<div v-bind:class="{'cls':use}">
				改变样式...
			</div>

			<div v-bind:id="'num-' + id">div</div>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: "<b>Hello Vue!</b>",
					username: "ADMIN",
					use: false,
					id: 1
				}
			});
		</script>
	</body>
</html>
